<template>
    <div class="homePage-hotCity-box">
        <div class="container">
            <div class="content">
                <header class="clearfix public-header-bg">
                    <p>热门城市</p>
                    <p>CITY</p>
                </header>
                <a-row class="top-box">
                    <a-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" class="li" v-for="(item,index) in hotCityList" :key="index" :cityId="item.cityId" @click.stop="getHotCityData(item.cityId, item.title)">
                        <a href="#bottom-box" class="inside">
                            <img v-lazy="item.photo" :title="item.title" :alt="item.title" >
                            <div class="font">
                                <span>{{item.title}}</span>
                                <i class="iconfont icon-iconfontsousuo1" title="点击查看该城市房源"></i>
                            </div>
                        </a>
                    </a-col>
                </a-row>
                <div class="bottom-box" id="bottom-box">
                    <a-row>
                        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="Hot-city-detail-info">
                            <div class="Hot-city-detail-info-skeleton">
                                <a-skeleton active :title="false" :paragraph="{rows: 1, width: '100%'}" v-for="(item, index) in [1,2,3,4,5,6]" :key="index" :loading="HotCityDetailInfoLoading" />
                            </div>
                            <table class="table" v-show="!HotCityDetailInfoLoading && !HotCityDetailInfo_noDataShow">
                                <thead>
                                <tr>
                                    <th width="25%">人口与学校概况</th>
                                    <th width="32%">数值</th>
                                    <th width="23%">生活与购房概况</th>
                                    <th width="20%">数值</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>人口数量/年增长率</td>
                                    <td>约{{ isNull0(hotCityDetails.totalPeople) }}万人 / {{ isNull0(hotCityDetails.annualPopulationGrowthRate, '%') }}</td>
                                    <td>失业率</td>
                                    <td>约{{ isNull0(hotCityDetails.unemployedRateState, '%') }}</td>
                                </tr>
                                <tr>
                                    <td>主要族裔</td>
                                    <td>{{ isNull0(hotCityDetails.mainEthnic) }}</td>
                                    <td>住房自有率</td>
                                    <td>约{{ isNull0(hotCityDetails.homeOwnershipRate, '%') }}</td>
                                    <!--<td>生活成本</td>-->
                                    <!--<td>-->
                                        <!--<a-tooltip placement="top" title="全美平均值是100" class="top">-->
                                            <!--{{ isNull0(hotCityDetails.liveCost) }}-->
                                        <!--</a-tooltip>-->
                                    <!--</td>-->
                                </tr>
                                <tr>
                                    <td>家庭收入（年）</td>
                                    <td>约{{ isNull0_USD(hotCityDetails.annualHomeIncomeState) }}</td>
                                    <td>房屋空置率</td>
                                    <td>约{{ isNull0(hotCityDetails.housingVacancyRate, '%') }}</td>
                                </tr>
                                <tr>
                                    <td>人均收入（年）</td>
                                    <td>约{{ isNull0_USD(hotCityDetails.annualAverageIncome) }}</td>
                                    <td>租房率</td>
                                    <td>约{{ isNull0(hotCityDetails.rentalRate, '%') }}</td>
                                </tr>
                                <!--<tr>-->
                                    <!--<td>公立/私立学校数量</td>-->
                                    <!--<td>{{ isNull0(hotCityDetails.totalPublicSchool) }} / {{ isNull0(hotCityDetails.totalPrivateSchool) }}</td>-->
                                <!--</tr>-->
                                <tr>
                                    <td>本州知名大学</td>
                                    <td>{{ isNull0(hotCityDetails.wellKnownUniversity) }}</td>
                                    <td>年最高/最低温度</td>
                                    <td>{{ isNull0(hotCityDetails.annualMaxTemperature, '°') }} / {{ isNull0(hotCityDetails.annualMinTemperature, '°') }}</td>
                                </tr>
                                </tbody>
                            </table>
                            <h5 style="text-align: center; padding: 0 15px; line-height: 260px;" v-show="HotCityDetailInfo_noDataShow">暂未查询到数据！</h5>
                            <p class="clearfix">
                                此数据来自于第三方互联网，仅供参考 <router-link :to="{path: 'City', query: {cityid: cityId }}" target="_blank">查看更多城市信息&gt;&gt;</router-link>
                            </p>
                        </a-col>
                        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="Hot-city-detail-echarts">
                            <header class="clearfix">{{ cityName }}每月平均房价走势</header>
                            <aside class="chartBox" id="Hot-city-house-price-chart" v-show="!HotCityDetailEcharts_noDataShow"></aside>
                            <h5 style="text-align: center; padding: 0 15px; line-height: 260px;" v-show="HotCityDetailEcharts_noDataShow">暂未查询到数据！</h5>
                        </a-col>
                    </a-row>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                //热门城市图文数据
                hotCityList: [
                    {
                        cityId:'1',
                        photo:'/static/img/SanFrancisco.jpg',
                        title: '旧金山'
                    },
                    {
                        cityId:'2',
                        photo:'/static/img/LosAngeles.jpg',
                        title: '洛杉矶'
                    },
                    {
                        cityId:'3',
                        photo:'/static/img/NewYork.jpg',
                        title: '纽约'
                    },
                    {
                        cityId:'4',
                        photo:'/static/img/Seattle.jpg',
                        title: '西雅图'
                    },
                    {
                        cityId:'5',
                        photo:'/static/img/Boston.jpg',
                        title: '波士顿'
                    },
                    {
                        cityId:'6',
                        photo:'/static/img/Orlando.jpg',
                        title: '奥兰多'
                    },
                    {
                        cityId:'7',
                        photo:'/static/img/NewJersey.jpg',
                        title: '新泽西'
                    },
                    {
                        cityId:'8',
                        photo:'/static/img/Atlanta.jpg',
                        title: '亚特兰大'
                    },
                    {
                        cityId:'9',
                        photo:'/static/img/Miami.jpg',
                        title: '迈阿密'
                    },
                    {
                        cityId:'10',
                        photo:'/static/img/Dallas.jpg',
                        title: '达拉斯'
                    },
                    {
                        cityId:'11',
                        photo:'/static/img/Houston.jpg',
                        title: '休斯顿'
                    },
                    {
                        cityId:'13',
                        photo:'/static/img/Chicago.jpg',
                        title: '芝加哥'
                    },
                ],
                hotCityDetails: {}, //城市详情数据
                HotCityDetailInfoLoading: true, //城市详情数据table——骨架屏加载loading
                HotCityDetailInfo_noDataShow: false, //城市详情数据table——没有数据提示信息是否显示

                cityId: '1', //城市id
                cityName: '', //城市名
                myEcharts: null,
                HotCityDetailEcharts_noDataShow: false, //城市平均房价走势数据——没有数据提示信息是否显示

            }
        },
        computed: {},
        created() {
        },
        mounted() {
            //根据城市id展示城市详情
            this.getHotCityData(1, '旧金山');

            this.myEcharts = echarts.init(document.getElementById('Hot-city-house-price-chart'));
            this.myEcharts.showLoading();
            window.addEventListener('resize', () => {
                this.myEcharts.resize();
            });

        },
        methods: {
            //根据城市id展示城市详情
            getHotCityData(cityId, title) {
                //过滤掉最后面的更多城市，敬请期待
                if(!cityId) return;
                this.cityName = title;
                //获取热门城市的指数数据
                this.$get('/city/index/'+ cityId).then(res => {
                    this.HotCityDetailInfoLoading = false;
                    if (res.status == 0) {
                        this.hotCityDetails = res.data;
                        this.cityId = cityId;
                        this.HotCityDetailInfo_noDataShow = false;
                    } else {
                        console.log(res.msg);
                        this.HotCityDetailInfo_noDataShow = true;
                    }
                });

                //获取热门城市的平均房价走势数据
                this.$get('/city/trend/'+ cityId +'/1').then(res => {
                    if (res.status == 0) {
                        this.HotCityDetailEcharts_noDataShow = false;
                        this.cityHousePriceRent_echarts(res.data);
                    } else {
                        console.log(res.msg);
                        this.HotCityDetailEcharts_noDataShow = true;
                    }
                });
            },
            //热门城市的平均房价走势——折线图
            cityHousePriceRent_echarts(data){
                let dateList = data.map(item => {
                    return this.momentFormat(item['time'], 'YYYY-MM-DD');
                });
                let sfrList = data.map(function (item) {
                    return item['sfr'];
                });
                let condoList = data.map(function (item) {
                    return item['condo'];
                });
                let markPoint = {
                    data: [
                        {type: 'max', name: '最大值',symbolSize:65},
                        {type: 'min', name: '最小值',symbolSize:65}
                    ],
                    label:{
                        normal:{
                            formatter:function(param){
                                let KM = '';
                                if(param.value.toString().length >= 7){
                                    KM = (param.value/1000000).toFixed(1) +'M'
                                }else{
                                    KM = Math.round(param.value/1000) +'k'
                                }
                                return '$'+ KM;
                            }
                        }
                    }
                };
                this.myEcharts.hideLoading();
                this.myEcharts.setOption({
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['独栋别墅', '公寓']
                    },
                    xAxis:  {
                        type: 'category',
                        boundaryGap: false,
                        data: dateList,
                        //坐标轴刻度标签的相关设置
                        axisLabel:{
                            color: '#969696'
                        },
                        //坐标轴轴线相关设置
                        axisLine:{
                            show: false,
                        },
                        //坐标轴刻度相关设置
                        axisTick:{
                            show: false,
                        },
                    },
                    yAxis: {
                        type: 'value',
                        //坐标轴刻度标签的相关设置
                        axisLabel: {
                            color: '#969696',
                            formatter:function(value){
                                let KM = '';
                                if(value.toString().length >= 7){
                                    KM = (value/1000000).toFixed(1) +'M'
                                }else{
                                    KM = Math.round(value/1000) +'k'
                                }
                                return '$'+ KM;
                            }
                        },
                        //坐标轴轴线相关设置
                        axisLine:{
                            show: false,
                        },
                        //坐标轴刻度相关设置
                        axisTick:{
                            show: false,
                        },
                    },
                    series: [
                        {
                            name: '独栋别墅',
                            type: 'line',
                            smooth: true,
                            data: sfrList,
                            markPoint: markPoint,
                        },
                        {
                            name: '公寓',
                            type: 'line',
                            smooth: true,
                            data: condoList,
                            markPoint: markPoint,
                        }
                    ],
                    color: ['#40c3f9', '#ffbf53'],

                });
            }

        },
        components: {}
    }
</script>

<style lang="less" type="text/less">
    body {
        .homePage-hotCity-box{
            padding: 40px 0;
            >.container{
                >.content{
                    >.top-box {
                        padding: 20px 0;
                        > .li {
                            cursor: pointer;
                            padding: 5px;
                            > .inside {
                                display: block;
                                width: 100%;
                                height: 100%;
                                overflow: hidden;
                                position: relative;
                                background: #000;
                                -webkit-transition: .5s;
                                -moz-transition: .5s;
                                -ms-transition: .5s;
                                -o-transition: .5s;
                                transition: .5s;
                                > img {
                                    width: 100%;
                                    height: 150px;
                                    -webkit-transition: .5s;
                                    -moz-transition: .5s;
                                    -ms-transition: .5s;
                                    -o-transition: .5s;
                                    transition: .5s;
                                }
                                > .font {
                                    width: 100%;
                                    height: 100%;
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    text-align: center;
                                    > span {
                                        font-size: 20px;
                                        color: #fff;
                                        font-weight: bold;
                                        position: absolute;
                                        top: 50%;
                                        left: 50%;
                                        -webkit-transform: translate(-50%, -50%);
                                        -moz-transform: translate(-50%, -50%);
                                        -ms-transform: translate(-50%, -50%);
                                        -o-transform: translate(-50%, -50%);
                                        transform: translate(-50%, -50%);
                                    }
                                    > i {
                                        font-size: 25px;
                                        color: #fff;
                                        position: absolute;
                                        top: 35%;
                                        left: 44%;
                                        z-index: 9;
                                        text-align: center;
                                        -webkit-border-radius: 50%;
                                        -moz-border-radius: 50%;
                                        border-radius: 50%;
                                        box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
                                        -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
                                        -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
                                        display: inline-block;
                                        opacity: 0;
                                        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
                                        -moz-transition: -moz-transform 0.3s, opacity 0.3s;
                                        -o-transition: -o-transform 0.3s, opacity 0.3s;
                                        transition: transform 0.3s, opacity 0.3s;
                                    }
                                }
                                > .font::before,
                                > .font::after {
                                    position: absolute;
                                    content: '';
                                    opacity: 0;
                                    transition: all 0.5s;
                                }
                                > .font::before {
                                    top: 15px;
                                    right: 5px;
                                    bottom: 15px;
                                    left: 5px;
                                    border-top: 1px solid #fff;
                                    border-bottom: 1px solid #fff;
                                    transform: scale(0, 1);
                                    -webkit-transform-origin: 0 0;
                                    transform-origin: 0 0
                                }
                                > .font::after {
                                    top: 5px;
                                    right: 15px;
                                    bottom: 5px;
                                    left: 15px;
                                    border-right: 1px solid #fff;
                                    border-left: 1px solid #fff;
                                    transform: scale(1, 0);
                                    transform-origin: 100% 0;
                                }
                            }
                            > .inside:hover {
                                > img {
                                    transform: scale(1.05, 1.05);
                                    opacity: 0.5;
                                    filter: alpha(opacity=50);
                                }
                                > .font {
                                    > span {
                                        display: none;
                                    }
                                    > i {
                                        opacity: 1;
                                        -webkit-transform: scale(1);
                                        -moz-transform: scale(1);
                                        -ms-transform: scale(1);
                                        -o-transform: scale(1);
                                        transform: scale(1);
                                    }
                                }
                                > .font::before,
                                > .font::after {
                                    opacity: 1;
                                    transform: scale(1);
                                    transition: all 0.5s;
                                }
                            }
                        }
                    }
                    >.bottom-box{
                        padding: 60px 0 0 0;
                        >.ant-row{
                            >.Hot-city-detail-info{
                                padding: 0 15px 0 0;
                                >.Hot-city-detail-info-skeleton{
                                    .ant-skeleton{
                                        margin: 20px 0 0 0;
                                        .ant-skeleton-content{
                                            vertical-align: middle;
                                            .ant-skeleton-paragraph{
                                                > li{
                                                    height: 25px;
                                                }
                                            }
                                        }
                                    }
                                }
                                > .table{
                                    width: 100%;
                                    >thead{
                                        background: #eeeeee;
                                        padding: 5px 0;
                                        text-align: left;
                                        >tr{
                                            >th{
                                                text-align: center;
                                                vertical-align: middle;
                                                border-bottom: 2px solid #dddddd;
                                                padding: 8px;
                                                line-height: 1.846;
                                            }
                                        }
                                    }
                                    >tbody{
                                        >tr{
                                            border-bottom: 1px dashed #cccbcb;
                                            text-align: left;
                                            padding: 10px 0;
                                            >td{
                                                text-align: center;
                                                vertical-align: middle;
                                                font-size: 14px;
                                                padding: 8px 5px;
                                                line-height: 1.846;
                                                border-top: 1px solid #dddddd;
                                            }
                                        }
                                    }
                                }
                                >p{
                                    font-size: 15px;
                                    margin: 40px 0 0 0;
                                    >a{
                                        float: right;
                                        color: #666;
                                       text-decoration: none;
                                    }
                                    >a:hover{
                                        color: #0087e5;
                                    }
                                }
                            }
                            >.Hot-city-detail-echarts{
                                padding: 0 0 0 15px;
                                >header{
                                    background: #eeeeee;
                                    padding:10px 10px;
                                }
                                >.chartBox{
                                    width: 100%;
                                    height: 300px;
                                    margin: 20px 0 0 0;
                                }
                            }
                        }
                    }
                }
            }
        }

    }
</style>
